<template>
  <div v-resize="onResize" class="mobile-list-config">
    <je-panel v-bind="appConfigOptions" ref="mobilePanel">
      <template #left>
        <left-preview :data="leftData" :record-data="recordData"></left-preview>
      </template>
      <template #default>
        <je-panel v-bind="listJsConfig">
          <template #default>
            <je-editor-code
              ref="editor"
              v-model:value="editorValue"
              height="100%"
              width="100%"
              hide-api
              @save="onSave"
          /></template>
          <template #bbar>
            <je-button type="text" style="color: #aeffa6" @click="onSave(editorValue)"
              >保存</je-button
            >
          </template>
        </je-panel>
      </template>
      <template #right>
        <right-panel
          :func-id="funcId"
          :record-data="recordData"
          :height="listContainerHeight"
          @sharedData="sharedData"
        ></right-panel>
      </template>
    </je-panel>
  </div>
</template>

<script>
  import {
    reactive,
    toRefs,
    defineComponent,
    onMounted,
    onBeforeMount,
    nextTick,
    watch,
  } from 'vue';
  import { Panel, Button, Loading as loadingComponent, Modal, EditorCode } from '@jecloud/ui';
  import { defineAsyncComponent } from 'vue';
  import RightPanel from './right.vue';
  import { isNotEmpty, decode, encode } from '@jecloud/utils';

  import { baseConfigSave } from '@/api/index';

  export default defineComponent({
    name: 'FormFieldConfig',
    components: {
      JePanel: Panel,
      JeButton: Button,
      RightPanel,
      LeftPreview: defineAsyncComponent({
        loader: () => import('./left.vue'),
        loadingComponent,
        delay: 0,
      }),
      JeEditorCode: EditorCode,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    emits: [],
    setup(props) {
      const state = reactive({
        isChange: true,
        editorValue: '', // 编辑器里面的数据
        funcId: props.recordData.JE_CORE_FUNCINFO_ID, // 功能ID
        activeKey: 1,
        listJsConfig: {
          bbar: {
            sixe: 80,
            style: { background: '#1e1e1e', borderTop: '1px solid #e6e6e6' },
          },
        },
        appConfigOptions: {
          left: {
            size: 360,
            split: true,
            minSize: 360,
            collapsible: true,
            collapsed: false,
            style: { border: '1px solid #e6e6e6' },
          },
          default: {
            style: { borderTop: '1px solid #e6e6e6', borderBottom: '1px solid #e6e6e6' },
          },
          right: {
            size: 360,
            minSize: 360,
            split: true,
            collapsible: true,
            collapsed: false,
          },
        },
        leftData: {},
        listContainerHeight: 0,
      });
      const methods = {
        onResize({ height }) {
          state.listContainerHeight = height;
        },
        // 保存编辑器的内容
        onSave(value) {
          if (!value) {
            Modal.alert('脚本内容不能为空！');
            return false;
          }
          Object.assign(state.leftData, { TEMPLETE_FFT: value });
          const gridJsData = props.recordData.FUNCINFO_GRIDJSLISTENER
            ? decode(props.recordData.FUNCINFO_GRIDJSLISTENER)
            : [];
          const ishasAppRowRenderer = gridJsData.some((item) => item.code == 'row-renderer');
          if (ishasAppRowRenderer) {
            gridJsData.map((item) => {
              if (item.code == 'row-renderer') {
                item.func = value;
              }
            });
          } else {
            const params = {
              func: value,
              fire: '1',
              code: 'row-renderer',
              name: 'row-renderer',
              scope: 'APP',
            };
            gridJsData.unshift(params);
          }
          baseConfigSave({
            tableCode: 'JE_CORE_FUNCINFO',
            JE_CORE_FUNCINFO_ID: state.funcId,
            FUNCINFO_GRIDJSLISTENER: encode(gridJsData),
          })
            .then((res) => {
              if (res.success) {
                Modal.message('保存成功', 'success');
              }
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },

        sharedData(data) {
          if (isNotEmpty(data)) {
            state.leftData = data;
            state.editorValue = data.TEMPLETE_FFT;
          }
        },
      };
      onBeforeMount(() => {});
      onMounted(() => {});
      watch(
        () => state.listContainerHeight,
        () => {
          setTimeout(() => {
            state.listContainerHeight =
              state.listContainerHeight ||
              document.querySelector('.mobile-list-config').offsetHeight;
          }, 0);
        },
        { deep: true, immediate: true },
      );
      return { ...methods, ...toRefs(state) };
    },
  });
</script>
<style lang="less">
  .mobile-list-config {
    .ant-collapse > .ant-collapse-item > .ant-collapse-header {
      padding: 8px 16px;
      font-size: 14px;
    }
    .tab-container {
      .ant-tabs-nav {
        padding: 0 10px !important;
        margin-bottom: 0px !important;
      }
    }
  }
</style>

<style lang="less" scoped>
  .mobile-list-config {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 20px 20px;
  }
</style>
